<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wusj-components</title>
  <!-- 使用 CDN 引入 markdown-it -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.min.js"></script>

    
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/atom-one-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
  <!-- and it's easy to individually load additional languages -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/javascript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/typescript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/bash.min.js"></script>
  <style>
      :root {
        --primary-color: #4a6cf7;
        --text-color: #333;
        --bg-color: #ffffff;
        --border-color: #e0e0e0;
        --code-bg: #282c34;
        --header-bg: #f8f9fa;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        line-height: 1.6;
        color: var(--text-color);
        background-color: var(--bg-color);
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
      }
      
      .page-header {
        background: var(--header-bg);
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
        border-left: 5px solid var(--primary-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      h1 {
        margin: 0;
        color: var(--primary-color);
        font-size: 28px;
      }
      
      .npm-link {
        display: inline-flex;
        align-items: center;
        background: #cb3837;
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
      }
      
      .npm-link:hover {
        background: #b02b2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        text-decoration: none;
      }
      
      .npm-link svg {
        margin-right: 8px;
      }
      
      .container {
        display: flex;
        flex-direction: column;
      }
      
      .rendered {
        background: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 30px;
        margin-top: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
      }
      
      .rendered h1 {
        font-size: 26px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 20px;
      }
      
      .rendered h2 {
        font-size: 22px;
        color: #444;
        margin-top: 30px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 8px;
      }
      
      .rendered h3 {
        font-size: 18px;
        margin-top: 25px;
      }
      
      .rendered p {
        margin: 16px 0;
      }
      
      .rendered ul, .rendered ol {
        padding-left: 25px;
      }
      
      .rendered li {
        margin: 8px 0;
      }
      
      .rendered code {
        background: #f5f7f9;
        padding: 2px 5px;
        border-radius: 3px;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
        font-size: 14px;
        color: #476582;
      }
      
      .rendered pre {
        background: var(--code-bg);
        padding: 16px;
        border-radius: 8px;
        overflow-x: auto;
        margin: 20px 0;
        position: relative;
      }
      
      .rendered pre code {
        background: transparent;
        padding: 0;
        color: #abb2bf;
        font-size: 14px;
        line-height: 1.5;
      }
      
      .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px 0;
        color: #666;
        font-size: 16px;
      }
      
      .loading::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        border: 2px solid #ddd;
        border-top-color: var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      
      .error {
        background: #fff0f0;
        color: #d32f2f;
        padding: 15px;
        border-left: 4px solid #d32f2f;
        border-radius: 4px;
        margin: 20px 0;
        font-size: 14px;
      }
      
      a {
        color: var(--primary-color);
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }
      
      .hljs {
        padding: 0;
        background: transparent;
      }
      
      .footer {
        margin-top: 40px;
        text-align: center;
        color: #666;
        font-size: 14px;
        padding: 20px 0;
        border-top: 1px solid var(--border-color);
      }
      
      /* 适配移动设备 */
      @media (max-width: 768px) {
        body {
          padding: 0 15px;
        }
        
        .rendered {
          padding: 20px 15px;
        }
        
        .page-header {
          flex-direction: column;
          align-items: flex-start;
        }
        
        .npm-link {
          margin-top: 15px;
        }
      }
  </style>
</head>
<body>
  <div class="page-header">
    <h1>wusj-components 使用文档</h1>
    <a href="https://www.npmjs.com/package/wusj-components" target="_blank" class="npm-link">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#ffffff">
        <path d="M0 0v24h24v-24h-24zm21 17h-9v3h-6v-3h-3v-14h18v14z"/>
      </svg>
      在 NPM 上查看
    </a>
  </div>
  
  <div id="loading" class="loading">正在加载文档...</div>
  <div id="error" class="error" style="display: none;"></div>
  
  <div class="container">
    <div id="readme" class="rendered"></div>
  </div>
  
  <div class="footer">
    <p>查看更多信息请访问 <a href="https://www.npmjs.com/package/wusj-components" target="_blank">NPM: wusj-components</a></p>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const md = window.markdownit({
        html: true,
        linkify: true,
        typographer: true,
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(str, { language: lang }).value;
            } catch (__) {}
          }
          return ''; // 使用默认的转义
        }
      });

      const readmeEl = document.getElementById('readme');
      const loadingEl = document.getElementById('loading');
      const errorEl = document.getElementById('error');

      // 固定加载 wusj-components 的 README.md
      fetchReadme();

      function fetchReadme() {
        hideError();
        readmeEl.innerHTML = '';
        showLoading();

        // 直接从 unpkg 获取 wusj-components 的 README.md
        fetch('https://unpkg.com/wusj-components/README.md')
          .then(response => {
            if (!response.ok) {
              throw new Error('无法加载 wusj-components 的 README 文件');
            }
            return response.text();
          })
          .then(text => {
            hideLoading();
            const renderedHtml = md.render(text);
            readmeEl.innerHTML = renderedHtml;
            
            // 对代码块应用高亮
            document.querySelectorAll('pre code').forEach((block) => {
              hljs.highlightElement(block);
            });
            
            // 为所有链接添加 target="_blank"
            document.querySelectorAll('.rendered a').forEach(link => {
              link.setAttribute('target', '_blank');
            });
          })
          .catch(error => {
            hideLoading();
            showError(error.message);
          });
      }

      function showLoading() {
        loadingEl.style.display = 'flex';
      }

      function hideLoading() {
        loadingEl.style.display = 'none';
      }

      function showError(message) {
        errorEl.textContent = message;
        errorEl.style.display = 'block';
      }

      function hideError() {
        errorEl.style.display = 'none';
      }
    });
  </script>
</body>
</html>